<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>文档标题</title>
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./raphael2.2.6.js"></script>
</head>
<body>
	<script>
		var page = Raphael(0,0,800,600);

		var cx = 300, cy = 300;

		function createPath(ang, r, color) {

			var path = page.path();
			path.attr({
				'stroke-width': 20,
				'stroke': color
			})

			calc(ang, true);
			function calc(ang, isFrist) {
				var arr = [];
				arr.push('M ' + cx + ' ' + (cy - r));
				var x = cx + Math.sin(ang * Math.PI / 180) * r;
				var y = cy - Math.cos(ang * Math.PI / 180) * r;
				if (ang == 0) {
					x -= 0.01;
				}
				arr.push('A ' + r + ' ' + r + ' 0 ' + (ang > 180 ? 1 : 0) + ' 1 ' + x + ' ' + y);

				if (isFrist) {
					path.attr('path', arr.join(' '));
				} else {
					if (ang == 0) {
						path.attr('path', 'M ' + cx + ' ' + (cy - r) + ' A ' + r + ' ' + r + ' 0 1 1 ' + x + ' ' + y);
					} else if (ang == 360 / 60) {
						path.attr('path', 'M ' + cx + ' ' + (cy - r) + ' A ' + r + ' ' + r + ' 0 0 1 ' + x + ' ' + y);
					} else {
						path.animate({
							'path': arr.join('')
						}, 500, 'ease-in-out')
					}
				}
			}
			path.calc = calc;
			return path;
		}
		var dateArr = [];
		function tick() {
			var oDate = new Date();
			if (dateArr.length == 0) {
				dateArr = [
					createPath(360 * oDate.getHours() / 12, 200, 'red'),
					createPath(360 * oDate.getMinutes() / 60, 150, 'green'),
					createPath(360 * oDate.getSeconds() / 60, 100, 'blue')
				]
			} else {
				dateArr[0].calc(360 * oDate.getHours() / 12)
				dateArr[1].calc(360 * oDate.getMinutes() / 60)
				dateArr[2].calc(360 * oDate.getSeconds() / 60)
			}
		}
		tick();
		window.setInterval(tick, 1000)

	</script>
</body>
</html>